<script>
import {changeStatus, deleteAimeta, getList, updateDefaultModel} from "@/api/aihuman/humanConfig/config";
import HumanBasicInfo from "@/views/aihuman/humanManagement/humanConfig/humanBasicInfo.vue";
import {mapGetters} from "vuex";
import EmptyData from "@/components/aihuman/EmptyData/index.vue";
import {getUrl} from "@/util/aihuman/getUrl";

export default {
  name: "HumanConfigList",
  components: {EmptyData, HumanBasicInfo},
  data() {
    return {
      form: {
        aimetaName: '',
        dimensionType: '3'
      },
      list: [],
      page: {
        pageNo: 1,
        pageSize: 12,
        total: 0
      },
      loading: false // 添加loading状态
    }
  },
  created() {
    this.getHumanList()
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission[`config-add`], false),
        editBtn: this.vaildData(this.permission[`config-update`], false),
        setDefaultBtn: this.vaildData(this.permission['config-default-set'], false),
        deleteBtn: this.vaildData(this.permission['config-delete'], false),
      }
    }
  },
  methods: {
    getUrl,
    getHumanInfo(item) {
      this.$refs.humanBasicInfo.openDialog(item)
    },
    previewData(item) {
      this.$emit('get-human-item', item)
    },
    removeHuman(item) {
      this.$confirm('确定要删除这个数字人吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {

        const {data} = await deleteAimeta({id: item.id})

        this.$message({
          type: 'success',
          message: data.msg
        });

        await this.getHumanList()
      }).catch(() => {

      });
    },
    // async changeStatus(val, item) {
    //   console.log(val, item);
    //   const {data} = await changeStatus({id: item.id, status: val})
    //   this.$message.success(data.msg)
    // },
    async updateDefault(val, item) {
      try {
        const {data} = await updateDefaultModel({id: item.id, defaultModel: val})
        this.$message.success(data.msg)
        this.getHumanList()
      } catch (e) {
        this.getHumanList()
      }
    },
    getHumanList() {
      this.$nextTick(async()=>{
        this.loading = true // 开始请求时设置loading为true
        try {
          const {data} = await getList(
            {
              pageNo: this.page.pageNo,
              pageSize: this.page.pageSize,
              inEditor: true,
              ...this.form
            }
          )
          this.page.total = data.data.total
          this.list = data.data.records
        } finally {
          this.loading = false // 请求结束后设置loading为false
        }
      })
    }
  }
}
</script>

<template>
  <div v-loading="loading">
    <template v-if="list.length > 0 && !loading">
      <div class="project-items">
        <div class="project-box" v-for="item in list" :key="item.id">
          <div class="project-img">
            <div class="project-status">
              <el-switch
                class="switch"
                v-model="item.defaultModel"
                active-text="默认"
                inactive-text="默认"
                width="50"
                :disabled="!permissionList.setDefaultBtn"
                @change="updateDefault($event, item)"
              ></el-switch>

<!--              <el-switch
                class="switch"
                v-model="item.status"
                active-text="启用"
                inactive-text="禁用"
                :inactive-value="1"
                :active-value="0"
                width="50"
                @change="changeStatus($event, item)"
              ></el-switch>-->
            </div>
            <img :src="getUrl()+item.voiceImageLink" alt="">
          </div>

          <div class="project-title">
            <div class="project-title__box">
              <strong>{{ item.aimetaName }}</strong>
            </div>
            <div class="name-handle">
              <button v-if="permissionList.editBtn" @click="previewData(item)">形象配置</button>
              <el-dropdown>
                <span class="el-icon-more"></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="getHumanInfo(item)">基本信息</el-dropdown-item>
<!--                  <el-dropdown-item @click.native="previewData(item)">形象配置</el-dropdown-item>-->
                  <el-dropdown-item v-if="permissionList.deleteBtn" @click.native="removeHuman(item)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="date-text">创建时间：{{ item.createTime }}</div>
        </div>
      </div>

      <div class="pagination-box">

        <el-pagination
          background
          @size-change="getHumanList"
          @current-change="getHumanList"
          :current-page.sync="page.pageNo"
          :page-sizes="[9, 18, 36, 72]"
          :page-size.sync="page.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </template>

    <empty-data v-else-if="!loading"/>

    <human-basic-info
      ref="humanBasicInfo"
    />
  </div>
</template>

<style scoped lang="scss">
@import "~@/styles/aihuman/img-list";

</style>
